import React, { Component } from 'react'
import { Button, WhiteSpace, Checkbox, Toast } from 'antd-mobile'
import logo from './logo-icon.png'
import './login.less'
import { Link } from 'react-router-dom'
import {
    getRegCode,
    loginApi
} from '../../apis/login'
/** 引入redux的链接库，引入页面定义的Action */
import { connect } from 'react-redux'
import {
    saveUserInfo
} from '../../action/homeAct'

/** 在页面上一定注意要先import 再使用 */
const AgreeBtn = Checkbox.AgreeItem

class Login extends Component {

    constructor() {
        super()
        this.state = {
            userPhone: '',      // 用户手机号
            validateCode: '',   // 验证码
            vatBtn: '获取验证码', // 验证码按钮文字
            canVat: false,      // 可以获取验证码
            canSubmit: false,   // 可以登录
            reGet: true,        // 是否可以重新获取验证码
        }
    }

    /** 获取用户是否记住密码信息，如果有，直接登陆 */
    componentDidMount() {
        let cache = null
        if (window.plus && window.plus.storage) {
            console.log('调用原生储存')
            cache = window.plus.storage.getItem('login_user_info')
        } else {
            cache = localStorage.getItem('login_user_info')
        }

        if (!!cache) {
            cache = JSON.parse(cache)
            /** 可以判断是否在有效期内，如果不在有效期内，需要清除缓存 */
            this.setState({
                userPhone: cache.userPhone,
                validateCode: cache.validateCode
            })
            this.loginEvt()
        }
    }

    /** 电话号码输入框 */
    phoneChange = evt => {
        console.log('phone value:', evt.target.value)
        // TODO 完成手机输入格式化，只能输入11位数字
        this.setState({
            userPhone: evt.target.value,
            canVat: evt.target.value.length === 11
        })
    }

    /** 验证码 */
    codeChange = evt => {
        this.setState({
            validateCode: evt.target.value,
            canSubmit: evt.target.value.length === 6
        })
    }

    /** 获取验证码 */
    getCode = async () => {
        if (!this.state.canVat) return;
        if (!this.state.reGet) return;

        console.log('============== start time')
        /** 节流、防抖，在读秒结束之前不能第二次点击 */
        this.setState({
            reGet: false
        })

        Toast.loading('获取验证码')
        let result = await getRegCode(this.state.userPhone)
        Toast.hide()
        if (result.code === 200) {
            this.loopTime(60)
        } else {
            /** 可以重新获取验证码 */
            this.setState({
                reGet: true
            })
            Toast.fail('获取验证码失败，请重试')
        }
    }

    loopTime = count => {
        this.setState({
            vatBtn: count > 0 ? `${count}S重新获取` : '获取验证码',
            reGet: count <= 0
        })
        setTimeout(() => {
            --count
            if (count >= 0) this.loopTime(count)
        }, 1000)
    }

    /** 登录事件 */
    loginEvt = async () => {
        /** TODO 校验规则，电话号码验证，校验验证码是否正确 */
        Toast.loading('登录中...')
        let result = await loginApi(this.state.userPhone, this.state.validateCode)
        Toast.hide()
        if (result.code === 200) {
            Toast.success('登录成功，页面跳转中')
            // TODO 存储用户信息，把登录信息存储在Native

            this.props.dispatch(saveUserInfo(result.data))
            // 如果用勾选了记住登录密码，兼容写法，存储需要失效，需要判断是否是自动登录，如果是自动登录不需要刷新缓存
            let cacheStr = JSON.stringify({userPhone: this.state.userPhone, validateCode: this.state.validateCode})
            if (window.plus && window.plus.storage) {
                console.log('调用原生储存')
                window.plus.storage.setItem('login_user_info', cacheStr)
            } else {
                localStorage.setItem('login_user_info', cacheStr)
            }
            this.props.history.push('/home')

        } else {
            Toast.fail('登录失败，请重试')
        }
    }

    render() {
        console.log(this.props)
        return (
            <div className="login-container">
                <p>登录</p>
                {/* 图片引入使用,require 引入图片,import 引入图片 */}
                {/* <img src={require("./logo-icon.png")} /> */}
                <img src={logo} alt=""/>
                <span className="sub-title">欢迎登录AEC风味实验室</span>
                <input value={this.state.userPhone} onChange={this.phoneChange}/>
                <WhiteSpace size="lg"/>
                {/* <div style={{position: 'relative'}}> */}
                <div className="vat-box">
                    <input value={this.state.validateCode} onChange={this.codeChange}/>
                    <span 
                        onClick={this.getCode}
                        className={this.state.canVat ? "active" : ""}>
                            {this.state.vatBtn}
                    </span>
                </div>
                <WhiteSpace size="lg"/>
                <AgreeBtn>记住密码？</AgreeBtn>
                <WhiteSpace size="lg"/>
                <Button type="primary" onClick={this.loginEvt} disabled={!this.state.canSubmit}>登录</Button>
                <WhiteSpace size="lg"/>
                <Link to="/register">注册新用户</Link>
            </div>
        )
    }
}

/** 映射props */
const mapProps = state => {
    return {
        ...state.Home
    }
}

export default connect(mapProps)(Login)